<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全局组件</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <!-- 定义一个父组件 -->
     <div style="border: 1px solid palegreen;" id="app1">
        <div>这里是app1的作用域</div>
        <my-haerd></my-haerd>
     </div>
     <!-- 定义一个子组件 -->
      <div style="border: 1px solid paleturquoise;" id="app2">
        <div>这里是app2的作用域</div>
        <my-haerd></my-haerd>
      </div>
      <script>
        Vue.component('MyHaerd', {
            template:`<haerd>这是头部</haerd>`
        })

        new Vue({
            el:"#app1"
        })

        new Vue({
            el:"#app2"
        })
      </script>
</body>
</html>